<template>
    <view>
        <view class="header" v-if="status == 0">
            <view class="header-img"></view>
            <view class="refund-status">
                <view>退款中</view>
                <view style="margin-top:10rpx">2019-12-14 12:12:12</view>
            </view>
        </view>
        <view class="header" v-if="status == 1">
            <view class="header-img"></view>
            <view class="refund-status">
                <view>退款中</view>
                <view style="margin-top:10rpx">2019-12-14 12:12:12</view>
            </view>
        </view>
        <view class="header" v-if="status == 2">
            <view class="header-img"></view>
            <view class="refund-status">
                <view>退款中</view>
                <view style="margin-top:10rpx">2019-12-14 12:12:12</view>
            </view>
        </view>
        <view class="refund-commidty">
            <view class="refund-type">
                <view>退款类型</view>
                <view>退款退货</view>
            </view>
            <view class="commidty-info">
                <view class="commidty-img"></view>
                <view class="commidty-detail-info">
                    <view class="commidty-name">桂花糕</view>
                    <view class="commidty-price">￥32.0</view>
                    <view class="commidty-text">共1件商品，合计￥132.0（含运费）</view>
                </view>
                <view class="iconfont icon-chenghao commidty-num">1</view>
            </view>
        </view>
        <view class="refund-other-info">
            <view class="other-info-item">申请单号：2342545</view>
            <view class="other-info-item">申请时间：12-13  13:12:13</view>
            <view class="other-info-item">申请原因：不合适</view>
            <view class="other-info-item">退款说明：退款退货</view>
            <view class="other-info-item">退款金额：<text style="color:#FF1E1E">￥32.0</text></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            status: 0
        }
    },
    methods: {
        
    }
}
</script>

<style>
    .header {
        height: 133rpx;
        background: #ffffff;
        margin-top: 20rpx;
        display: flex;
        justify-content: left;
        overflow: hidden
    }
    .header-img {
        width: 55rpx;
        height: 50rpx;
        border: 1rpx solid #ccc;
        margin-top: 25rpx;
        margin-left: 49rpx;
    }
    .refund-status {
        margin-left: 42rpx;
        margin-top: 43rpx;
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
    }
    .refund-commidty {
        height: 269rpx;
        background: #ffffff;
        margin-top: 20rpx;
    }
    .refund-type {
        display: flex;
        justify-content: space-between;
        color: #333333;
        font-size: 26rpx;
        padding: 21rpx 48rpx 13rpx 36rpx;
        border-bottom: 1rpx solid #F5F5F5;
    }
    .commidty-info {
        position: relative;
        padding: 15rpx 0rpx 0rpx 37rpx;
        display: flex;
        justify-content: left;
    }
    .commidty-img {
        width: 128rpx;
        height: 128rpx;
        border: 1rpx solid #ccc;
    }
    .commidty-detail-info {
        height: 150rpx;
        margin-top: 10rpx;
        margin-left: 43rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .commidty-name {
        color: #333333;
        font-size: 28rpx;
    }
    .commidty-price {
        color: #FF1E1E;
        font-size: 30rpx;
    }
    .commidty-text {
        color: #999999;
        font-size: 24rpx;
    }
    .commidty-num {
        position: absolute;
        top: 80rpx;
        right: 57rpx;
        color: #666666;
        font-size: 24rpx;
    }
    .refund-other-info {
        padding: 32rpx 0 0 40rpx;
        margin-top: 20rpx;
        background: #ffffff;
    }
    .other-info-item {
        height: 87rpx;
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
</style>